<template>
  <div>
    <div style="height:400px;margin:0 auto">
      <el-table
        :data="items"
        stripe
        :header-cell-style="{
          background: '#B6C4D3',
          color: '#1A1C1E',
          padding: '0',
        }"
        :header-row-style="{ height: '35px' }"
        :row-style="{ height: '25px' }"
        :cell-style="{ padding: '0px' }"
      >
        <!-- 表头 -->
        <el-table-column type="selection" width="55" />
        <el-table-column prop="title" label="课程名称" fit />
        <el-table-column prop="courseTypeName" label="课程类别" fit />
        <el-table-column prop="year" label="年份" fit />
        <el-table-column prop="term" label="学期" fit />
        <el-table-column prop="classHours" label="总学时" width="150" />
        <el-table-column prop="credits" label="总学分" width="150" />
        <el-table-column prop="name" label="任课老师" fit />
        <!-- 对该列的操作 -->
        <el-table-column fixed="right" label="操作" width="180">
          <template slot-scope="scope">
            <!-- 点击事件传参为scope.row.* -->
            <el-button
              @click.native.prevent="viewCourseDetail(scope.row)"
              type="text"
            >
              查看 </el-button
            ><el-button
              @click.native.prevent="modifyTheCourse(scope.row)"
              type="text"
              disabled
            >
              修改 </el-button
            ><el-button @click.native.prevent="deleteOp(scope.row)" type="text">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-row>
      <el-col :span="6"
        ><div>
          
        </div></el-col
      >
      <el-col :span="18"
        ><div style="padding:19px">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="allItems.length"
            style="text-align: center; margin-top:10px"
          >
          </el-pagination></div
      ></el-col>
    </el-row>
    <CourseDetailDialog ref="CourseDetail" />
  </div>
</template>

<script>
import CourseDetailDialog from "./CourseDetailDialog";
export default {
  components: { CourseDetailDialog },
  data() {
    return {
      currentPage: 1, // 当前页数
      pageSize: 9, // 表的行数
      items: [], // 当前页面的所有数据项
      // 总数据项
      allItems: [
        //  {
        //       title: "操作系统",
        //       courseTypeName: "专业必修课",
        //       year: "2019",
        //       term: "上学期",
        //       classHours: 64,
        //       credits: 3.5,
        //       name: "李红",
        //       identifier: null,
        //       timePlace: [
        //           {
        //               time: "星期一 第1 - 2节",
        //               buildingId: "A1",
        //               roomNumber: "103"
        //           }
        //       ],
        //       sections: [
        //           {
        //               periodId: 1,
        //               year: "2019",
        //               term: "上学期",
        //               courseId: 2,
        //               buildingId: "A1",
        //               roomNumber: "103"
        //           },
        //           {
        //               periodId: 2,
        //               year: "2019",
        //               term: "上学期",
        //               courseId: 2,
        //               buildingId: "A1",
        //               roomNumber: "103"
        //           }
        //       ]
        //   },
      ],
    };
  },
  methods: {
    deleteOp(item) {
      let options = { sections: item.sections };
      var _this = this;
      this.$http
        .post(this.$api.CourseMonitorDeleteCourse, options)
        .then((resp) => {
          if (resp.success) {
            _this.$myMessage.success(this, "删除成功！");
            _this.$emit("searchAgain");
          } else {
            this.$handleFailResp(this, resp);
          }
        });
    },
    // 事件一
    viewCourseDetail(item) {
      this.$refs.CourseDetail.courseInfo = item;
      this.$refs.CourseDetail.dialogVisible = true;
    },
    // 事件二
    modifyTheCourse(item) {
      console.log(item);
    },
    //处理页数的改变
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.items = this.allItems.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
  },
  mounted() {
    // 挂载时载入当前学生数，看情况要不要
    this.handleCurrentChange(this.currentPage);
  },
};
</script>

<style lang="less" scoped></style>
